// 引入 api
import { login, getUserInfo, getUserDetailById } from '@/api/user'
import { setToken, getToken, removeToken } from '@/utils/auth'
import { resetRouter } from '@/router'
const state = {
  // 储存数据
  token: getToken() || '',
  userInfo: {}
}
const mutations = {
  // 修改 state 只能执行同步修改
  setToken(state, payload) {
    // mutations 默认得到两个参数 state对象, 被调用时传入的参数 payload
    state.token = payload

    // localStorage.setItem('token', payload)
    setToken(payload)
  },
  setUserInfo(state, payload) {
    state.userInfo = payload
  },
  logout(state) {
    // 每当退出都要将token和用户数据清理掉
    // 记得连上 cookies 一起清理, 不然刷新又会加载持久化数据
    removeToken()
    state.token = ''
    state.userInfo = {}
    // 同时清理路由
    resetRouter()
  }
}
const actions = {
  // 异步可以封装在 actions 当中
  // login: () => {
  async login(context, payload) {
    console.log('actions 封装 发送请求')
    // 这个叫做 login 的 actions 属性是一个函数
    // 需要调用同名 api login 发送请求
    // 每个 actions 默认都有 context 当前模块, payload 传入数据, 一个两个参数
    const res = await login(payload)
    console.log('这里是响应的数据res', res)
    // 因为拦截器已经输出了深层 res.data.data, 这里接到数据直接用即可
    console.log(res)
    // 利用第一个参数模块实例的 commit 方法调用 mutations
    context.commit('setToken', res)

    // 为了主动监听超时, 咱们在登录成功后, 将时间记下来
    const now = Date.now()
    localStorage.setItem('time', now)
  },
  async getUserInfo(context) {
    const res = await getUserInfo()
    console.log('登录账号基本信息', res)
    // 这里是页面进来导航守卫调用的 actions
    // 获取登录账号基本信息, 但是缺了头像, 现在用另外接口补上
    const detail = await getUserDetailById(res.userId)
    console.log('根据基本员工userId 获取更详细内容', detail)

    // 最后要将基本信息和详细信息合并, 一起放入vuex state 用
    // 将原来两个对象数据都展开 合并成一个对象使用
    const userInfo = {
      ...res,
      ...detail
    }
    context.commit('setUserInfo', userInfo)
  }
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}
